<template>
    <div>
        <van-nav-bar title="账号登录" color='#2eb979'  left-arrow  @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
        <van-field
        v-model='user.username'
          type='tel'
          name="账号"
          placeholder="请输入账号"
          :rules="[{ required: true,trigger:'onChange',pattern:/^[a-z0-9_-]{3,9}$/ }]">
      </van-field>

        <van-field
        v-model='user.password'
          type="password"
          name="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, trigger: 'onChange',pattern:/^\d{6}$/  }]"
        >
     </van-field>
      <div style="margin: 16px;">
        <van-button block type="info"
          native-type="submit"
          color='#2eb979'
          :disabled='isloading'
          :loading='isloading'
          >登录
        </van-button>
     </div>

  <van-cell center title="还没有账号，去注册~" />

</van-form>
    </div>

</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  name: 'Login',
  data () {
    return {
      user: {
        username: 'hzhmqd',
        password: '123456'

      },
      isloading: false
    }
  },
  methods: {
    ...mapActions(['asyncLoginAction']),
    onClickLeft () {
      this.$router.push('/layout/home')
    },
    async onSubmit (values) {
      this.isloading = true
      try {
        await this.asyncLoginAction(this.user)
        Notify({ type: 'success', message: 'Login Success' })
        // console.log(res)
        this.isloading = false
        this.$router.replace('/layout')
      } catch (err) {
        console.log(err.message)
        Notify({ type: 'warning', message: 'Login err' })
        this.isloading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-icon-arrow-left{
  color:aliceblue;
}
/deep/ .van-cell__title{
  text-align: center;
}
</style>
